<template>
	<view class="unio2o-rec-item box-shadow pd20">
		<image mode="aspectFill" class="bdr8" :src="recItem.image || ''"></image>
		<view class="text-over ft14 text-default">
			{{ recItem.title || '' }}
		</view>
		<view class="flex space alend mt10">
			<view class="text-price ft14">
				¥{{ recItem.price || 0 }}
			</view>
			<view class="btn-rec-qiang bg-main text-w ft14 ftw600 text-center">抢</view>
		</view>
		<view class="flex space mt10 ft12 text-notice">
			<view class="text-line">¥{{ recItem.originalPrice || 0 }}</view>
			<view>已抢{{ recItem.salesCount || 0 }}</view>
		</view>
		<!-- 佣金和收益信息 -->
		<view class="commission-info mt10">
			<view class="commission-rate ft12 bg-orange text-w">佣金{{ recItem.commissionRate || 0 }}%</view>
			<view class="commission-amount ft12 text-orange">收益¥{{ recItem.commissionAmount || 0 }}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			recItem: {
				type: Object,
				default: () => ({
					title: '',
					price: 0,
					originalPrice: 0,
					image: '',
					salesCount: 0,
					commissionRate: 0,
					commissionAmount: 0
				})
			}
		}
	}
</script>

<style>
	.unio2o-rec-item{
		width: 100%;
		height: 540rpx;
		border-radius: 16rpx;
	}
	.unio2o-rec-item image{
		width: 100%;
		height: 290rpx;
	}
	
	.commission-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.commission-rate {
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		background: #ff6b35;
	}
	
	.commission-amount {
		font-weight: 600;
		color: #ff6b35;
	}
</style>
